<template>
  <div class="reg">
      <my-head title="注册"> <Back></Back> </my-head>
      <div class="reg-box">
        <van-form ref="form" @submit="onSubmit" @failed="onFailed">
          <van-field
            v-model="form.username"
              name="username"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
              center
              clearable
              left-icon="user-o"
            />
            <van-field
            v-model="form.phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' },{pattern:reg.phone,message:'请输入正确的手机号'}]"
            center
            clearable
            left-icon="phone-o"
          />
          <van-field
            v-model="form.captcha"
            name="captcha"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' },{pattern:reg.code,message:'请输入正确的验证码'}]"
            center
            clearable
            left-icon="apps-o"
          >
          <template #button>
            <van-button native-type="button" v-if="flag" size="small" type="primary" :disabled="phoneFlag"  @click="startSendCode" >发送验证码</van-button>
            <van-button native-type="button" v-else size="small" type="default" disabled >
              <van-count-down :time="total * 1000" @finish="onfinish">
                <template #default="timeData">
                  <span class="block">剩余 {{ timeData.minutes * 60 +  timeData.seconds }} S</span>
                </template>
              </van-count-down>

            </van-button>
          </template>
          </van-field>
          <!-- <van-field
            v-model="form.password"
            :type="type"
            name="password"
            center
            clearable
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' },{pattern:reg.pwd,message:'请输入正确的密码(6-16位数字字母)'}]"
            left-icon="browsing-history-o"
            :right-icon="type=='text'?'eye-o':'closed-eye'"
            @click-right-icon="changeType"
          /> -->
          <!-- <van-field
            v-model="form.dbpass"
            type="password"
            name="dbpass"
            center
            clearable
            label="确认密码"
            placeholder="确认密码"
            :rules="[{ required: true, message: '请填写密码' },{pattern:reg.pwd,message:'请输入正确的密码(6-16位数字字母)'}]"
            left-icon="browsing-history-o"
          /> -->
          <PassInput
            v-model="form.password"

            @blur="checkPassword"
          ></PassInput>
          <PassInput
            v-model="form.dbpass"
            name="dbpass"
            label="确认密码"
            placeholder="确认密码"
            :rules="[
              {validator:checkTwoPass,message:'两次密码不一致'}
            ]"
          ></PassInput>
          <div style="margin: 16px;">
            <van-button  round block type="info" native-type="submit">注册账号</van-button>
          </div>
          <div style="margin: 16px;">
           <div class="links">
             <router-link class="aitem aleft" to="/login">登录</router-link>
             <router-link class="aitem aright" to="/findpass">找回密码</router-link>
           </div>
          </div>
        </van-form>
      </div>
  </div>
</template>


<script>
import { checkPhoneApi , todoSentCode , checkCaptcha , todoRegister  } from '@/api/api'


export default {
    data() {
        return {
            form: {},
            type: "password",
            total:120,
            flag:true,
        };
    },
    computed: {
        phoneFlag() {
            return !this.reg.phone.test(this.form.phone);
        }
    },
    methods: {
      checkPassword(){
        if(this.reg.pwd.test(this.form.dbpass) && this.reg.pwd.test(this.form.password)){
          //  正则通过
          this.$refs.form.validate('dbpass').catch(err=>{})
        }
      },
      checkTwoPass(val){
        if(this.reg.pwd.test(val) && this.reg.pwd.test(this.form.password)){
           return val === this.form.password;
        }
        return false;
      },
      changeType() {
          this.type = (this.type == 'password' ? 'text' : 'password');
      },
      async onSubmit(value) {
        console.log(this.form)
        console.log(value)

        // 先校验验证码
        let res = await checkCaptcha({
            phone:value.phone,
            captcha:value.captcha
        }).catch(err=>{
          this.ShowToast('验证码错误')
          throw err;
        })

        if(res.data && res.code ==200){
           // 注册账号
           let res = await todoRegister(value)
           if(res.code==200){
            this.ShowSuccess('注册成功')
            this.$router.push('/login?username='+value.username+'&phone='+value.phone);
           }else{
            this.showError('注册失败')
           }
        }else{
          this.ShowToast('验证码错误')
        }



      },
      onFailed() {
        // this.$toast('表单校验失败')
        this.ShowToast('表单校验失败!')
      },
      onfinish(){
        this.flag = true;
        this.total = 120;
      },
      async startSendCode(){
        console.log('startSendCode')
        let res = await checkPhoneApi({
          phone:this.form.phone
        })

        if(res.result){
          this.ShowToast('手机号已经被注册,请去登录!')
        }else{
          // 发送验证码
          let res = await todoSentCode({
            phone:this.form.phone
          })
          if(res.code==200 && res.data){
            this.flag = false;

          }
        }
      }
    }
}
</script>

<style lang="scss" scoped>
.links{
  margin-top:15px;
  .aitem{
    color:#000;
  }
  .aleft{
    color:orange;
  }
  .aright{
    color:#999;
  }
}
.reg{
  width:100%;
  min-height: 100%;
}

</style>
